<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机号隐藏</title>
</head>
<body>
    <script>
        // 隐藏手机号中间四位
        const tel ='13611112222'
        // 1.离用正则划分手机号
        const reg =/^(\d{3})\d{4}(\d{4})$/
        // 2.离用replace替换
        // $1可以得到正则中第一个小括号里面的内容
        // $2可以得到正则中第二个小括号里面的内容
        const str = tel.replace(reg,'$1****$2')
        console.log(str)
        // 只显示后四位手机号 字符串重复 repeat
        const reg2 =/^\d{3}\d{4}(\d{4})$/
        const str2 = tel.replace(reg2,`${'*'.repeat(7)}$1`)
        console.log(str2)


        // 找到 <body> 元素
        const body = document.body;

        // 创建一个新的 <h1> 元素
        const newH1 = document.createElement('h1');
        // 设置 <h1> 元素的文本内容
        newH1.textContent = '手机号:' + tel;
        // 将 <h1> 元素添加到 <body> 中
        body.appendChild(newH1);

        // 创建一个新的 <h1> 元素
        const newH2 = document.createElement('h1');
        // 设置 <h1> 元素的文本内容
        newH2.textContent =  '隐藏手机号中间四位:' + str;
        // 将 <h1> 元素添加到 <body> 中
        body.appendChild(newH2);

        // 创建一个新的 <h1> 元素
        const newH3 = document.createElement('h1');
        // 设置 <h1> 元素的文本内容
        newH3.textContent =  '只显示后四位手机号:' + str2;
        // 将 <h1> 元素添加到 <body> 中
        body.appendChild(newH3);

    </script>
</body>
</html>
